/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */

import BreadCrumbCom from '@/components/BreadCrumbCom';
import { useHistory } from 'inula-router';
import '@/styles/numaOverview.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Drawer } from 'antd';
import useLocalStorage from '@/hooks/useLocalStorage';
import { useEffect, useState } from 'openinula';
import overviewStep1 from '@/assets/images/overviewStep1.png';
import overviewStep2 from '@/assets/images/overviewStep2.png';
import overviewStep3 from '@/assets/images/overviewStep3.png';
import overviewStep4 from '@/assets/images/overviewStep4.png';
import overviewStepDark1 from '@/assets/images/overviewStepDark1.png';
import overviewStepDark2 from '@/assets/images/overviewStepDark2.png';
import overviewStepDark3 from '@/assets/images/overviewStepDark3.png';
import overviewStepDark4 from '@/assets/images/overviewStepDark4.png';
import { environmnetPreparation, workload, newEnvPrepare } from '@/assets/md';
import { skipSendMainMsg } from '@/tools/utils';

import PriorityPreemption from './SchedulingPolicyConfiguration/PriorityPreemption';

export default function NumaOverview() {
  const [currentTheme, setCurrentTheme] = useLocalStorage('theme', 'light');
  const history = useHistory();
  const [className, setClassName] = useState('');
  const [open, setOpen] = useState(false);
  const showDrawer = (data, temporyClass = '') => {
    setClassName(temporyClass);
    setExplanatoryInfo(data);
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const isIndependence = !window.location.href.includes('container_platform');
  const [explanatoryInfo, setExplanatoryInfo] = useState();
  const overviewData = [
    {
      index: 1,
      img: currentTheme === 'light' ? overviewStep1 : overviewStepDark1,
      title: '环境准备',
      desc: '节点级NUMA资源分配需要修改containerd配置和操作系统cmdline参数，以开启nri插件可用性。',
      link: '',
      path: '',
      className: 'break_code_md_body',
      showDrawers: true,
      md: newEnvPrepare,
    },
    {
      index: 2,
      key: 'AffinityPolicyConfiguration',
      img: currentTheme === 'light' ? overviewStep2 : overviewStepDark2,
      title: '亲和策略配置',
      desc: '对于优先级不同的任务，进行不同的调度优化，在集群调度以及节点内NUMA调度的层面上，保证Pod达到最优的分配效果，性能显著提升。',
      link: '配置亲和策略 >',
      path: '/AffinityPolicyConfiguration',
      href: '/container_platform/scheduling/AffinityPolicyConfiguration',
      showDrawers: false,
      md: '',
    },
    {
      index: 3,
      key: 'pod',
      img: currentTheme === 'light' ? overviewStep3 : overviewStepDark3,
      title: '工作负载部署',
      desc: '在资源管理中部署工作负载，使用NUMA亲和能力。',
      link: '部署工作负载 >',
      path: '/workload/pod',
      href: '/container_platform/workload/pod',
      showDrawers: true,
      md: workload,
    },
    {
      index: 4,
      key: 'numaMonitor',
      img: currentTheme === 'light' ? overviewStep4 : overviewStepDark4,
      title: '集群NUMA监控',
      desc: '查看集群中NUMA资源分布，CPU、内存资源使用情况。',
      link: '查看NUMA监控 >',
      path: '/numaMonitor',
      href: '/container_platform/scheduling/numaMonitor',
      showDrawers: false,
      md: '',
    },
  ];
  const goOtherPage = (e, data) => {
    skipSendMainMsg(e, data.key, data.path, history, !data.showDrawers);
  };
  useEffect(() => {
  }, []);
  return (
    <div id="numa_overview" className="numa_overview">
      <BreadCrumbCom items={[
        { title: 'NUMA亲和调度', path: '/scheduling/NumaOverview' },
        { title: '概览', path: '/' },
      ]} />
      <div className="numa_overview_content">
        <div className="numa_overview_content_banner">
          <p className="numa_overview_content_banner_title">NUMA亲和调度</p>
          <p className="numa_overview_content_banner_desc">NUMA亲和针对优先级高低不同的任务，提供不同的优化方式，在集群调度以及节点内NUMA调度的层面上，保证Pod达到最优的分配效果</p>
        </div>
        <div className="numa_overview_content_process">
          <div className="numa_overview_content_process_all">
            {overviewData.map(item => (
              <div className="numa_overview_content_process_single">
                <img src={item.img} alt="" className="numa_overview_content_process_single_img" />
                <div>
                  <div className="numa_overview_content_process_single_rightTop">
                    <p className="numa_overview_content_process_single_rightTop_num">{item.index}</p>
                    <p className="numa_overview_content_process_single_rightTop_title">{item.title}</p>
                    <QuestionCircleOutlined className='question-icon-hover' onClick={() => showDrawer(item.md, item.className)} style={{ marginLeft: '7px', display: item.showDrawers ? 'flex' : 'none' }} />
                  </div>
                  <p className="numa_overview_content_process_single_rightBottom">{item.desc}<a href={item.href} style={{ display: item.index === 3 && isIndependence ? 'none' : 'inline-block' }} onClick={e => goOtherPage(e, item)} className="numa_overview_content_process_single_rightBottom_link">{item.link}</a></p>
                </div>
              </div>
            ))}
          </div>
          <Drawer
            title=""
            placement="right"
            closable={false}
            onClose={onClose}
            width={600}
            open={open}
            getContainer={() => document.getElementById('numa_overview')}
          >
            <PriorityPreemption className={className} onClose={onClose} data={explanatoryInfo} />
          </Drawer>
        </div>
      </div>
    </div>
  );
};